<template>
  <div class="brightness-control">
    <div class="header">
      <h1>屏幕亮度控制</h1>
      <p>调整您的屏幕亮度以获得最佳视觉体验</p>
    </div>

    <div class="output-selection" v-if="availableOutputs.length > 0">
      <label for="output-select">选择显示设备:</label>
      <select id="output-select" v-model="selectedOutput">
        <option v-for="output in availableOutputs" :key="output" :value="output">
          {{ output }}
        </option>
      </select>
    </div>

    <div class="brightness-container">
      <div class="brightness-slider-container">
        <input
            type="range"
            :min="minBrightnessValue"
            :max="maxBrightnessValue"
            :step="stepValue"
            v-model.number="brightnessValue"
            @input="updateBrightness"
        />
        <div class="brightness-value-container">
          <span class="min-value">最小亮度 (0.1)</span>
          <span class="current-value">{{ brightnessValue.toFixed(1) }}</span>
          <span class="max-value">最大亮度 (1.0)</span>
        </div>
      </div>

      <div class="brightness-preview">
        <div class="preview-title">预览亮度</div>
        <div class="preview-box" :style="{ 'opacity': brightnessValue / 2 }"></div>
      </div>
    </div>

    <div class="brightness-buttons">
      <button @click="decreaseBrightness" class="decrease-btn">
        <i class="fas fa-minus"></i>
      </button>
      <button @click="resetBrightness" class="reset-btn">
        <i class="fas fa-sync-alt"></i>
      </button>
      <button @click="increaseBrightness" class="increase-btn">
        <i class="fas fa-plus"></i>
      </button>
    </div>

    <div class="brightness-info">
      <p>提示: 您可以通过滑块或按钮调整亮度，也可以点击重置按钮恢复默认亮度 (1.0)。</p>
    </div>
  </div>
</template>

<script>
import {
  DecreaseBrightness,
  GetAvailableOutputs,
  InitializeBrightness,
  IncreaseBrightness,
  SetSelectedOutput,
  SetCustomBrightness
} from "../../wailsjs/go/main/App";

export default {
  data() {
    return {
      brightnessValue: 0.8,
      maxBrightnessValue: 1.0,
      minBrightnessValue: 0.3,
      stepValue: 0.1,
      selectedOutput: '',
      availableOutputs: []
    };
  },
  methods: {
    async updateBrightness() {
      try {
        await SetCustomBrightness(this.brightnessValue);
      } catch (error) {
        console.error("设置亮度失败:", error);
        this.showNotification("设置亮度失败，请检查您的权限或显卡驱动。");
      }
    },
    async increaseBrightness() {
      try {
        await IncreaseBrightness(0.1);
        this.brightnessValue = await InitializeBrightness();
      } catch (error) {
        console.error("调整亮度失败:", error);
        this.showNotification("调整亮度失败，请检查您的权限或显卡驱动。");
      }
    },
    async decreaseBrightness() {
      try {
        await DecreaseBrightness(0.1);
        this.brightnessValue = await InitializeBrightness();
      } catch (error) {
        console.error("调整亮度失败:", error);
        this.showNotification("调整亮度失败，请检查您的权限或显卡驱动。");
      }
    },
    async resetBrightness() {
      try {
        await SetCustomBrightness(0.7);
        this.brightnessValue = 0.7;
      } catch (error) {
        console.error("重置亮度失败:", error);
        this.showNotification("重置亮度失败，请检查您的权限或显卡驱动。");
      }
    },
    async initBrightness() {
      try {
        this.brightnessValue = await InitializeBrightness();
      } catch (error) {
        console.error("初始化亮度失败:", error);
        this.showNotification("初始化亮度失败，可能需要手动设置。");
      }
    },
    async loadOutputs() {
      try {
        this.availableOutputs = await GetAvailableOutputs();
        if (this.availableOutputs.length > 0) {
          this.selectedOutput = this.availableOutputs[0];
          await SetSelectedOutput(this.selectedOutput);
        }
      } catch (error) {
        console.error("加载显示设备失败:", error);
        this.showNotification("加载显示设备失败，请检查您的权限或显卡驱动。");
      }
    },
    showNotification(message) {
      this.$notify({
        title: "亮度控制",
        message: message,
        type: "warning"
      });
    }
  },
  watch: {
    selectedOutput(newOutput) {
      SetSelectedOutput(newOutput);
      this.initBrightness();
    }
  },
  mounted() {
    this.loadOutputs();
    this.initBrightness();
  }
};
</script>

<style scoped>
.brightness-control {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #333;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 10px;
}

.header p {
  font-size: 16px;
  color: #7f8c8d;
}

.output-selection {
  margin-bottom: 25px;
}

.output-selection label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2c3e50;
}

.output-selection select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f9f9f9;
  font-size: 16px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

.brightness-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.brightness-slider-container {
  margin-bottom: 20px;
}

input[type="range"] {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  background: linear-gradient(to right, #ddd 0%, #ddd 100%);
  outline: none;
  border-radius: 4px;
  position: relative;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-webkit-slider-thumb:active {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.brightness-value-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  color: #7f8c8d;
  font-size: 14px;
}

.current-value {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.brightness-preview {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.preview-title {
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
}

.preview-box {
  width: 100%;
  height: 120px;
  background-color: #2c3e50;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

.brightness-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
}

button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button i {
  font-size: 18px;
}

.decrease-btn {
  background-color: #e74c3c;
  color: white;
}

.decrease-btn:hover {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.reset-btn {
  background-color: #3498db;
  color: white;
}

.reset-btn:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.increase-btn {
  background-color: #2ecc71;
  color: white;
}

.increase-btn:hover {
  background-color: #27ae60;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.brightness-info {
  text-align: center;
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.6;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 20px;
}
</style>